<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="bootstrap3.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="flowDesign/flowdesign.css"/>


<script type="text/javascript" src="jquery-plug/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-plug/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="jquery-plug/jquery.contextmenu.r2.js"></script>
<script type="text/javascript" src="jquery-plug/jquery.jsPlumb-1.4.0-all.js"></script>
<script type="text/javascript" src="flowDesign/flowdesign2.js"></script>
<script type="text/javascript" src="bootstrap3.0/js/bootstrap.min.js"></script>

<style type="text/css">
body{
	font-size: 12px;
	background-image: -webkit-radial-gradient(ellipse,hsla(0,0%,50%,0.9),hsla(0,0%,10%,0.9));
}
.badge{
	min-height: 10px;
}
#bodyDiv{
	width: 100%;
	min-height:880px;
	height: 100%; 
}
.headDiv{
	padding: 10px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#d2d2d2));
}
.headDiv span{
	margin-left: 10px;
}

.menuDiv{
	min-height:890px;
	max-height: 890px;
	overflow-y:auto;
}


.bodyTab{
	margin-top:-1px;
}

.bodyTab tr td{
	vertical-align: top;
	/* border: 1px solid #c6c6c6; */	
}
.nav>li>a{
	font-size:12px;
	padding:5px;
	min-width: 80px;
	text-align: center;
}
.removeSpan{
	font-size:10px;
	font-weight: 100;
	margin-left:5px;
	float: right;
	color:#fff;
}
.active .removeSpan{
	color:#333;
}
.nav{
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7fbff), to(#e8f3ff));
margin-left:-1px;
}
.nav>li>a:HOVER .removeSpan{
	color:#333;
}

.removeSpan:HOVER{
	cursor: pointer;
	background-color: #ddd;
}
.ulDiv{
	width:100%;
	min-height: 890px;
	border:1px solid #ddd;
	border-top:0px;
	text-align: left;
	background-image: url(image/canvas_bg.jpg);
	margin-left:-1px;
	position: relative;
}
.liDiv{
	width:100%;
	min-height: 870px;
	position: relative;
	padding:10px;
	
}
.list-group-item{
	padding:8px 15px;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e0e0e0));
	cursor:pointer;
}

.listGroupHide{
	
	border:1px solid #ddd;
	border-top:0px;
	border-radius:0 0 5px 5px;
	padding: 5px;
	display: none; 
	
}

.iconCell{
	width: 90px;
	height: 60px;
	/* background-color: #cdcdef; */
	margin:3px;
	display: inline-block;
	text-align:center;
	cursor: move;
}
.iconCell:HOVER{
	position: relative;
	top:-1px;
	left:-1px;
}
.iconCell img{
	width: 70px;
	height:50px;
	margin-top:5px;
}

.procCell{
	width:100%;
	padding:5px 10px;
	font-size: 12px;
	/* border: 1px solid #ddd; */
	color: #595957;
}
.procCell:HOVER{
	cursor:move;
	background-color: #EAEAEA;
}
.flowCell{
	width: 100%;
	height: 250px;
	padding: 0px;
	/* background-image: url(); */
	cursor:move;
}
.iconNode{
	font-size:12px;
}
.baseFlowNode{
	width:90px;
	height:60px;
	line-height:41px;
	color:#0e76a8;
	background-size:100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

</style>
</head>
<script type="text/javascript">
var canvas = new Array();
var canvasNum=1;
$(function(){
	//基础图元初始化
	var div = "";
	for(var i=1;i<=26;i++){
		div = div + "<div class='iconCell' draggable='true' ondragstart='drag(event)' data-type='icon' id='icon_"+i+"'><img src='icon/"+i+".png'/></div>";
	}
	$("#iconListDiv").html(div);
	//画布初始化
	var processData = {"total":0,"list":[]};
	//  var processData = {"total":5,"list":[
	// 	{"id":"61","flow_id":"4","process_name":"\u53d1\u8d77\u7533\u8bf7","process_to":"63,64","icon":"icon-ok","style":"width:121px;height:41px;line-height:41px;color:#0e76a8;left:193px;top:132px;"},
	// 	{"id":"62","flow_id":"4","process_name":"\u5ba1\u62792","process_to":"65","icon":"icon-star","style":"width:120px;height:30px;line-height:30px;color:#0e76a8;left:738px;top:137px;"},
	// 	{"id":"63","flow_id":"4","process_name":"\u5feb\u6377\u5ba1\u6279","process_to":"65","icon":"icon-star","style":"width:120px;height:30px;line-height:30px;color:#0e76a8;left:193px;top:472px;"},
	// 	{"id":"64","flow_id":"4","process_name":"\u5ba1\u62791","process_to":"62","icon":"icon-star","style":"width:120px;height:30px;line-height:30px;color:#ff66b5;left:486px;top:137px;"},
	// 	{"id":"65","flow_id":"4","process_name":"\u5f52\u6863\u6574\u7406\u4eba","process_to":"","icon":"icon-star","style":"width:120px;height:30px;line-height:30px;color:#0e76a8;left:738px;top:472px;"}
	// ]}; 

	
	

	var processData = {"total":2,"list":[
		{"top":243,"left":342,"process_to":"_cidli_div_1_cidicon_1","className":"","class":"process-step btn btn-small baseFlowNode ui-draggable ui-droppable","style":"left:342px;top:243px;background-image: url(icon/4.png);","process_id":"_cidli_div_1_cidicon_4","id":"_cidli_div_1_cidicon_4","process_name":"text"},
		{"top":63,"left":634,"process_to":"_cidli_div_1_cidicon_2","className":"","class":"process-step btn btn-small baseFlowNode ui-draggable ui-droppable","style":"left:634px;top:63px;background-image: url(icon/1.png);","process_id":"_cidli_div_1_cidicon_1","id":"_cidli_div_1_cidicon_1","process_name":""},
		
	]}; 


	


	// var processData = {"total":3,"list":[
	// {"_cidli_div_1_cidicon_4":{"top":194,"left":216,"process_to":["_cidli_div_1_cidicon_1","_cidli_div_1_cidicon_12"],"class":"process-step btn btn-small baseFlowNode ui-draggable ui-droppable","style":"left: 216px; top: 194px; background-image: url(\"icon/4.png\");","process_id":"_cidli_div_1_cidicon_4","id":"_cidli_div_1_cidicon_4","process_name":"text","className":"baseFlowNode"},"_cidli_div_1_cidicon_1":{"top":63,"left":634,"process_to":[],"className":"baseFlowNode","class":"process-step btn btn-small baseFlowNode ui-draggable ui-droppable _jsPlumb_endpoint_anchor_","style":"left:634px;top:63px;background-image: url(icon/1.png);","process_id":"_cidli_div_1_cidicon_1","id":"_cidli_div_1_cidicon_1","process_name":"text"}}
		
	// ]}; 

	


	
	canvas[1] = $("#li_div_1").Flowdesign({"processData":processData}); 



	//双击事件
	$('.baseFlowNode').on("dblclick",function(){
				var ids = $(this).attr('id');
				var data = $('#'+ids).text();
				var str = '<input type="text" value="'+data+'" />';
                $('#'+ids).html(str);
                  // alert(ids);
            });


	//左边菜单事件绑定
	 $(".list-group-item").each(function(){
		$(this).click(function(){
			$(".listGroupHide").css("display","none");
			$(this).next().css("display","block");
		});
	}); 
	//画布切换
	$("#projPramUl li a").each(function(item){
		$(this).click(function(e){
			if(e.target.tagName=="SPAN"||e.target.tagName=="span"){//删除该页
				confirm("你确定要删除吗?");
				//1.移除li 2.移除liDiv 3.情除canvas[canvasNum]对象 4.判断是否存在第一页  5.跳转到第一页(点击li1)/创建空白页
				
				return false;//阻止标签页跳转
			}else{
				var id = e.target.id
				canvasNum = parseInt(id.split("_")[id.split("_").length-1]);
				if(canvas[canvasNum]==undefined){
					var processData = {"total":0,"list":[]};
					canvas[canvasNum] = $("#li_div_"+canvasNum).Flowdesign({"processData":processData}); 
				}
			}
		})
	});
	
});



function saveProcess(){
	var info = canvas[canvasNum].getProcessInfo();
	console.log(info);
	// return;
	// alert(info);
	// console.log(canvas);
	// console.log(info);
	// var obj = JSON.parse(info);
	// console.log(obj);
	// return;

	
	// var obj = JSON.parse(info);
	// console.log(obj);
	// var jsonArr = [];
	// for (var key in obj) 
	// 	{
	// 		console.log(key);
	// 	  	console.log(obj[key]);
	// 	  	jsonArr.push(obj[key]);
	// 	  	 // jsonArr[]['top']  = obj[key]['top'];
	// 	  	 // jsonArr[]['left'] = obj[key]['left'];
	// 	}
	// 		// jsonArr[]['name'] = key;
	//  console.log(obj['_cidli_div_1_cidicon_1']['top']);
	//  console.log(obj['_cidli_div_1_cidicon_1']['left']);
	//  console.log(jsonArr);
	//alert(info);
	$.ajax({
		  type:'POST',
		  url:'local.php',
		  data:{'data':info},
		  success:function(res){
		  	console.log(res);
		  	if(res.status){
		  		alert('保存成功');
		  	}
		  }
		  
		  
	})
	// alert("链接信息："+info);
	// var obj = JSON.parse(info);
	// var html = "";
	// for(var key in obj){
	// 	html = html + "key:" + key + "---process_to:" + obj[key]["process_to"]+"<br/>";
	// }
	//$("#console").html(html);
}

//设置允许拖放区域
function allowDrop(ev){
	ev.preventDefault();
}

//对拖放事件设置数据
function drag(ev){
	var ele = $(ev.target);
	if(ele.get(0).tagName!="DIV"&&ele.get(0).tagName!="div"){
		ele = $(ev.target).parent("div");
		//console.info(ele.get(0).tagName);	
	}
	ev.dataTransfer.setData("id",ele.attr("id"));
	
	ev.dataTransfer.setData("text",ele.attr("title"));
	ev.dataTransfer.setData("type",ele.data("type"));
	console.log(ev.dataTransfer.id);
	console.log(ev.dataTransfer.text);
	console.log(ev.dataTransfer.type);
}

//放开元素时触发函数
function drop(ev){
	
	ev.preventDefault();//浏览器兼容，防止浏览器链接跳转
	if(ev.dataTransfer){//如果是画线则跳过
		var id=ev.dataTransfer.getData("id");
		var text = ev.dataTransfer.getData("text");
		var type = ev.dataTransfer.getData("type");
		var x = document.body.scrollLeft + ev.clientX-400;
		var y = document.body.scrollTop + ev.clientY-85;
		if(type=="flow"){
			//可新建一个标签页
			/* $("#flowdesign_canvas").html("");
			$(function(){
				var processData = {"total":5,"list":[{"id":"61","flow_id":"4","process_name":"\u53d1\u8d77\u7533\u8bf7","process_to":"63,64","icon":"icon-ok","style":"width:121px;height:41px;line-height:41px;color:#0e76a8;left:193px;top:132px;"},{"id":"62","flow_id":"4","process_name":"\u5ba1\u62792","process_to":"65","icon":"icon-star","style":"width:120px;height:30px;line-height:30px;color:#0e76a8;left:486px;top:337px;"},{"id":"63","flow_id":"4","process_name":"\u5feb\u6377\u5ba1\u6279","process_to":"65","icon":"icon-star","style":"width:120px;height:30px;line-height:30px;color:#0e76a8;left:193px;top:472px;"},{"id":"64","flow_id":"4","process_name":"\u5ba1\u62791","process_to":"62","icon":"icon-star","style":"width:120px;height:30px;line-height:30px;color:#ff66b5;left:486px;top:137px;"},{"id":"65","flow_id":"4","process_name":"\u5f52\u6863\u6574\u7406\u4eba","process_to":"","icon":"icon-star","style":"width:120px;height:30px;line-height:30px;color:#0e76a8;left:738px;top:472px;"}]};
				$("#flowdesign_canvas").Flowdesign({"processData":processData});
			}) */
			
		}else if(type=="procNode"){
			var style = "width:121px;height:41px;line-height:41px;color:#0e76a8;left:"+x+"px;top:"+y+"px;";
			var row = {"id":id,"flow_id":"7","aaaa":"proce","process_to":"61","process_name":"新建工序","icon":"icon-ok","style":style}; 
			canvas[canvasNum].addProcess(row);
		
		}else if(type=="icon"){
			var rId =  "_cid" + canvas[canvasNum].canvas.attr("id")+"_cid"+ id;
			var style = "left:"+x+"px;top:"+y+"px;background-image: url("+$("#"+id).find("img").attr("src")+");";
			var row = {"id":rId,"flow_id":canvas[canvasNum].canvas.attr("id"),"className":"baseFlowNode","process_name":"Text","process_to":"","icon":"","style":style}; 
			console.info(row);
			canvas[canvasNum].addProcess(row);
			console.log(row);
		}else{
			alert("您拖拽的对象不合法！");
		}
	}
}

function test(){
	var j = 1;
	test1();
}
function test1(){
	var i = 1+j;
	alert(i);
}
</script>
<body>
<div id="bodyDiv">
	<table width="100%" height="100%" class="bodyTab">
		<tr height="30px">
			<td colspan="3">
				<div class="headDiv">
					<span class="glyphicon glyphicon-plus" onclick="test()"></span>
					<span class="glyphicon glyphicon-floppy-save" onclick="saveProcess()"></span>
					<span class="glyphicon glyphicon-remove"></span>
					<span class="glyphicon glyphicon-refresh"></span>
				</div>
			</td>
		</tr>
		<tr >
			<td width="17%" style="padding:5px;background-color: #fff;">
				<div class="menuDiv">
					<div class="list-group">
						<div class="list-group-item">基础流程图</div>
						<div class="listGroupHide" style="display:block;" id="iconListDiv">
							<!-- <div class="iconCell"  draggable="true" ondragstart="drag(event)" data-type="icon" id="icon_1">
								<img src="icon/1.png"  />
							</div> -->
						</div>
						<div class="list-group-item">工序流程图</div>
						<div class="listGroupHide">
							<div class="procCell" id="proc1" align="left" draggable="true" ondragstart="drag(event)" data-type="procNode">
								<span class="glyphicon glyphicon-record"></span>
								<span>新建工序</span>
							</div>
							<div class="procCell" id="proc2" align="left" draggable="true" ondragstart="drag(event)" data-type="procNode">
								<span class="glyphicon glyphicon-record"></span>
								<span>新建工序</span>
							</div>
							<div class="procCell" id="proc3" align="left" draggable="true" ondragstart="drag(event)" data-type="procNode">
								<span class="glyphicon glyphicon-record"></span>
								<span>新建工序</span>
							</div>
							<div class="procCell" id="proc4" align="left" draggable="true" ondragstart="drag(event)" data-type="procNode">
								<span class="glyphicon glyphicon-record"></span>
								<span>新建工序</span>
							</div>
							<div class="procCell" id="proc5" align="left" draggable="true" ondragstart="drag(event)" data-type="procNode">
								<span class="glyphicon glyphicon-record"></span>
								<span>新建工序</span>
							</div>
						</div>
						<div class="list-group-item">流程图模板</div>
						<div class="listGroupHide">
							<div class="flowCell" align="left" id="flow1" draggable="true" ondragstart="drag(event)" data-type="flow">
								<img width="100%" src="image/test.jpg" />
							</div>
						</div>
					</div>
				</div>
			</td>
			<td width="20px"></td>
			<td width="82%" >
				<div class="mainDiv">
					<div class="contentDiv">
						<ul class="nav nav-tabs" id="projPramUl" role="tablist">
				  			<li class="active" ><a  role="tab" data-toggle="pill" href="#li_div_1" id="li_a_1">文件1<span class="glyphicon glyphicon-remove removeSpan"></span></a></li>
				  			<li ><a  role="tab" data-toggle="pill" href="#li_div_2" id="li_a_2">文件2<span class="glyphicon glyphicon-remove removeSpan"></span></a></li>
				  			<li ><a  role="tab" data-toggle="pill" href="#li_div_3" id="li_a_3">文件3<span class="glyphicon glyphicon-remove removeSpan"></span></a></li>
						</ul>
						<div class="ulDiv tab-content"  >
							<!-- <div class="toolDiv">
								<span class="glyphicon glyphicon-plus" onclick="addProcess()"></span>
								<span class="glyphicon glyphicon-floppy-save" onclick="saveProcess()"></span>
								<span class="glyphicon glyphicon-remove"></span>
								<span class="glyphicon glyphicon-refresh"></span>
							</div> -->
							<div id="li_div_1" class="liDiv tab-pane fade in active" ondragover="allowDrop(event)" ondrop="drop(event)"></div>

							<!-- 文件二图片内容 -->
							<div id="li_div_2" class="liDiv tab-pane fade " ondragover="allowDrop(event)" ondrop="drop(event)"></div>
							<!--  文件三的图片内容-->
							<div id="li_div_3" class="liDiv tab-pane fade" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
						</div>
					</div>
				</div>
			</td>
		</tr>
	</table>
	
	<div></div>
</div>
</body>
</html>